import { Component } from 'react';
import './Linechart.less';
import ReactHighcharts from 'react-highcharts';

export default class Linechart extends Component {

  constructor(props) {
    super(props);
  }


  config() {
    const { data } = this.props;
    return {
      chart:{
        width: window.innerWidth - 234
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: data.xAxis,
        label: {
          enabled: false
        },
      },
      yAxis: {
        title: {
          text: data.xText,
          align: 'high',
          rotation: 0,
          x: 30,
          y: -15
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '%'
      },
      legend: {
        verticalAlign: 'top',
        padding: 10,
        symbolRadius: 0
      },
      credits: {
        enabled: false
      },
      series: data.yAxis
    }
  }

  render() {
    return (
      <div className="mod-linechart">
        <ReactHighcharts config={this.config()} />
      </div>
    );
  }
}
